﻿/******************************************************/
/*对话框弹出组件
/******************************************************/

function ui_bubble(obj)
{
    obj = obj ? obj : {};
    this.iD = obj.iD ? obj.iD : "ui_bubble";
    this._class = obj._class ? "ui_bubble " + obj._class : "ui_bubble";
    this.content = obj.content ? obj.content : null;     //内容
    this.width = obj.width ? obj.width : 400;            //宽度
    this.height = obj.height ? obj.height : null;        //高度
    this.pointX = obj.pointX ? obj.pointX : 0;           //箭头所在X坐标
    this.pointY = obj.pointY ? obj.pointY : 0;           //箭头所在Y坐标
    this.hasProng = obj.hasProng != undefined ? obj.hasProng : true;  //弹出层是否包含箭头
    this.prongWidth = 90;  //箭头部分宽度
    this.prongHeight = 65;  //箭头部分高度
    this.callBack = obj.callBack ? true : false;         //关闭对话框前触发的回调函数
    this.bound = obj.bound != undefined ? obj.bound : false;           //点击其它地方时是否自动触发关闭
    
    ui_bubble._funcList[this.iD] = obj.callBack;
    this.jq = null;
    
    return this.construct();
}

ui_bubble.prototype = {
    callLater: function(fun, obj){
        return function(){fun.call(obj);}
    },
    
    construct: function(){
        if(this.jq != null && this.jq != undefined)
        {
//            this.jq.remove();
        }
        var jq = jQuery("#" + this.iD)
        if(jq.length == 0)
        {
            var html = [];
            Array.prototype.push.call(html,
                '<div id="', this.iD, '" class="ui_bubble">',
                //顶部
                '<div class="prong tp" style="left: 100px"><div class="sprite pr"></div></div>',
                '<ul class="bubble_top">',
                '<li class="fleft"><div class="sprite tl"></div></li>',
                '<li class="fright"><div class="sprite tr"></div></li>',
                '<li class="fmiddle"><div class="bttm"><div class="sprite tm"></div></div></li>',
                '</ul>',
                //中部
                '<div class="bubble_container_left">',
                '<div class="bubble_container_right">',
                '<div class="bubble_container_middle">',
                '<div class="bubble_content"></div>',
                '</div></div>',
                '<div class="bubble_close" title="关闭"></div>',
                '</div>',
                //底部
                '<ul class="bubble_bottom">',
                '<li class="fleft"><div class="sprite bl"></div></li>',
                '<li class="fright"><div class="sprite br"></div></li>',
                '<li class="fmiddle"><div class="bttm"><div class="sprite bm"></div></div></li>',
                '</ul>',
                //箭头
                '<div class="prong bp" style="left: 100px"><div class="sprite pr"></div></div>',
                '</div>'
            );
            
            var jqp = jQuery(document.body);
            jqp.append(html.join(""));
            jq = jqp.children(":last");
            jq.find(".bubble_close").click(this.callLater(this.hide, this));
        }
        this.jq = jq;
        
        if(this.height != null && this.height != undefined)
        {
            jq.find(".bubble_content").css({
                height: this.height - jq.find(".bubble_top").height() - jq.find(".bubble_bottom").height() - this.prongHeight
            });
        }
        if(this.content)
        {
            jq.find(".bubble_content").html(this.content);
            this.show();
        }
        
        jq = null;
        html = null;
    },
    
    show: function(obj){
        //显示
        if(obj)
        {
            return ui_bubble.apply(this, arguments);
        }
        
        var jq = this.jq;
        this.jq.show();
        var prong = this.jq.find(".prong").hide();
        h = this.height ? this.height : jq.height();
        h += this.prongHeight;
        //计算是否超出当前显示界面
        var sh = document.documentElement.clientHeight;
        var st = document.documentElement.scrollTop;
        if(!this.hasProng || this.pointY + h > st + sh && this.pointY - h < st)
        {
            //无箭头
            prong = prong.slice(0, 0);
            if(this.pointY + h - this.prongHeight < st + sh)
            {
                //无箭头未超出
                jq.css({top: this.pointY});
            }
            else
            {
                //无箭头仍超出
                jq.css({top: st + sh - h + this.prongHeight});
            }
        }
        else if(this.pointY - h < st)
        {
            //箭头在顶部
            prong = prong.eq(0);
            jq.css({top: this.pointY + 7 });
        }
        else
        {
            //箭头在底部
            prong = prong.eq(1);
            jq.css({top: this.pointY - h + 40});
        }
        
        var sw = document.documentElement.clientWidth;
        var sl = document.documentElement.scrollLeft;
        var pl = 0;
        var def = 100;
        if(this.pointX - def < sl)
        {
            //左部箭头内 || 左部分区域内（箭头向左）
            pl = this.pointX;
            prong.children().removeClass("pr").addClass("pl");
            prong.css({left: pl}).show();
        }
        else if(this.pointX + this.width - def >= sw + sl && this.pointX + def + this.prongWidth  < sw + sl)
        {
            //右部分区域（箭头向左）
            pl = this.width - (sw + sl - this.pointX);
            prong.children().removeClass("pr").addClass("pl");
            prong.css({left: pl}).show();
        }
        else if(this.pointX + def + this.prongWidth >= sw + sl)
        {
            //右部箭头内（箭头向右）
            pl = this.width - (sw + sl - this.pointX);
            prong.children().removeClass("pl").addClass("pr");
            prong.css({left: pl - this.prongWidth}).show();
        }
        else
        {
            //区域足够（箭头向左）
            pl = def;
            prong.children().removeClass("pr").addClass("pl");
            prong.css({left: def}).show();
        }
        
        //点击其它地方时是否自动触发关闭
        if(this.bound)
        {
            jq.attr("bound", "bound");
            jQuery(document).mousedown(ui_bubble._bound);
        }
        
        jq.attr({
            className: this._class
        }).css({
            width: this.width,
            left: this.pointX - pl
        });
        
        jq = null;
    },
    
    change: function(content)
    {
        //更改显示内容
        this.content = content;
        this.jq.find(".bubble_content").html(this.content);
        this.show();
    },
    
    hide: function(){
        //隐藏
        if(typeof ui_bubble._funcList[this.iD] == "function")
        {
            ui_bubble._funcList[this.iD]();
        }
        
        this.jq.hide();
    },
    
    close: function(){
        //关闭
        if(this.callBack && typeof this.callBack == "function")
        {
            this.callBack();
        }
        
        if(this.jq)
        {
            this.jq.remove();
            this.jq = null;
        }
    }
}

ui_bubble._funcList = {};
ui_bubble._bound = function(evt)
{
//    var el = evt.srcElement || evt.target;
//    var jq = jQuery(el);
//    var jqp = jq.parents(".ui_bubble[bound]");
//    if(jq.filter(".ui_bubble[bound]").length > 0)
//    {
//        jqp = jqp.add(jq);
//    }
//    if(jqp.length == 0)
//    {
//        //不在范围内
//        $(".ui_bubble[bound]:visible").find(".bubble_close").click();
//        jQuery(document).unbind("mousedown", ui_bubble._bound);
//    }
//    else
//    {
//        $(".ui_bubble[bound]:visible").not(jqp).find(".bubble_close").click();
//    }
    
    var x = evt.pageX;
    var y = evt.pageY;
    var el = evt.srcElement ? evt.srcElement : evt.target;
    if (el.tagName != undefined && el.tagName.toUpperCase() == "SELECT" && jQuery(el).parents(".ui_bubble[Bound]").length > 0)
    {
        return;
    }
    jQuery(document.body).children(".ui_bubble[bound]:visible").each(function(){
        var jq = jQuery(this);
        var w = jq.width();
        var h = jq.height();
        var t = parseInt(jq.css("top"));
        var l = parseInt(jq.css("left"));
        var tc = 0;
        
        var prong = jq.find(".prong:visible");
        if(prong.hasClass("tp"))
        {
            //扣除顶部箭头部分
            tc = prong.height();
        }
        else if(prong.hasClass("bp"))
        {
            //扣除底部箭头部分
            h -= prong.height();
        }
        if(x < l || x > l + w || y < t + tc || y > t + h)
        {
            //不在范围内
            jq.find(".bubble_close").click();
        }
    });
    
    if(jQuery(document.body).children(".ui_bubble[bound]:visible").length == 0)
    {
        jQuery(document).unbind("mousedown", ui_bubble._bound);
    }
    
    x = null;
    y = null;
    evt = null;
}